<template>
    <div class="fans">
        <div class="classify">
          <ul>
              <router-link to="/usercenter">
                <li class="iconfont"><a href="###">&#xe616;个人信息</a></li>
              </router-link>
              <router-link to="/like">
                <li class="iconfont"><a href="#/like">&#xe686;我的关注</a></li>
              </router-link>
              <router-link to="/fans">
                <li class="iconfont active"><a href="###" class="active">&#xe6cf;我的粉丝</a> <i style="color:#26a2ff">{{this.user.length}}</i></li>
              </router-link>
              <router-link to="/collect">
                <li class="iconfont"><a href="###">&#xe60c;我的收藏</a></li>
              </router-link>
              <router-link to="/myblog">
                <li class="iconfont"><a href="###">&#xe6af;我的博客</a></li>
              </router-link>
              <router-link to="myvideo">
                <li class="iconfont"><a href="###">&#xe64e;我的视频</a></li>
              </router-link>
              <router-link to="mybook">
                <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
              </router-link>
          </ul>
      </div>

      <div class="login" v-show="login">
        <a href="/#/login">还未登录，请先登录！</a>
      </div>

      <div class="single" v-show="main" ref="wrapper">
        <ul>
        <li class="photo" v-for="(item,index) in user" :key="item.index">
          <router-link :to='"/userdetails/" + item.id'>
          <img src="../../../../../../static/imgs/fans.jpg" alt="" v-if="!item.photo">
          <img :src="item.photo" alt="" v-if="item.photo">
          <span>{{item.name}}</span>
          </router-link>
          <a href="###" class="iconfont icon" :title="title[index]" @click="focus(index)" v-if="!statue[index]">&#xe667;</a>
          <a href="###" class="iconfont icon" :title="title[index]" @click="focus(index)" v-if="statue[index]" style="color: #FFDF00">&#xe635;</a>
        </li>

      </ul>
      </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
    name: 'fans',
    data () {
      return {
        login: true,
        main: false,
        list: [],
        user: [],
        statue: [],
        title: [],
      } 
    },
    methods: {
      focus (index) {
        const List = document.getElementsByClassName("icon");
          if (List[index].title == "关注") {
          List[index].innerHTML = ("&#xe635;")
          List[index].style.color = "#FFDF00"
          List[index].title = "互相关注"
          let postData = qs.stringify({
            id: this.list[index].user.id,
            statue: 0,
          })

          axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })
        }else {
          List[index].innerHTML = ("&#xe667;")
          List[index].style.color = "#333"
          List[index].title = "关注"
          let postData = qs.stringify({
            id: this.list[index].user.id,
            statue: 1,
          })

          axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
            }

          })

        }

        },
    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== '') {
            this.main = true
            this.login = false
            // console.log("111")
          }

        } 

      }) 

      axios.post(`/api/user/showFans`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          console.log(this.list)
          for (var i = 0; i < this.list.length; i++) {
            this.user.push(this.list[i].user)
            this.statue.push(this.list[i].attention)
            // console.log(this.statue)
            if (this.statue[i] == 0) {
              this.title.push("关注")
            } else {
              this.title.push("互相关注")
            }
          }
          console.log(this.title)
          console.log(this.statue)

        } 

      }) 

    },

    mounted () {
      this.$nextTick(() => {
        // 解决移动端因vue数据更新异步而无法滚动的问题
        this.scroll = new BScroll(this.$refs.wrapper, {
          click:true, //设置click参数，使单句歌词可点击
          adjustTime: 350, // 拉动之后的返回时间，默认400
          mouseWheel: true,
        })
      })

    }

}
</script>

<style lang="stylus" scoped>
.fans
  width 100%
  height auto
  position relative
  .classify
    width 15%
    height auto
    margin-top 5rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      padding-top 2rem
      padding-bottom 4rem
      margin-top .5rem
      // background-color red
      li
        width 100%
        margin-top .2rem
        line-height 4rem
        text-align center
        // background-color #fff
      li:hover
        //background-color #26a2ff
        background-color #eee
      .active
        background-color #eee
        color #26a2ff
  .login
    width 80%
    line-height 36.5rem
    top 0
    margin-left 17%
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .single
    width 82%
    height 36rem
    overflow hidden
    top 0
    margin-left 17%
    margin-bottom 2rem
    font-size .9rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    .photo
      width 90%
      height 4rem
      margin-left 5%
      position relative
      padding 1rem 0
      border-bottom .05rem #ccc solid
      background-color #fff
      img 
        height 80%
        width 5%
        margin-left 0%
        margin-left 2rem
        border-radius 50%
      span 
        margin-left 1rem
      .iconfont
        width 6%
        text-align center
        line-height 2rem
        position absolute
        top 2rem
        right 2.5rem
        font-size 1.6rem
        // background-color red
</style>